<template>
  <div class="NotForSaleEdit">
    <div class="NotForSaleEdit-one borderbottom">
      <div class="NotForSaleEdit-title">
        <div></div>
        <div>面料基本信息</div>
      </div>
      <div class="NotForSaleEdit-one-content">
        <div>
          <div class="star">供应商：</div>
          <!-- <el-select
            style="width: 400px"
            v-model="form.supplier_id"
            placeholder="请选择供应商"
          >
            <el-option
              v-for="item in factoryList"
              :key="item.supplier_id"
              :label="item.factory_name"
              :value="item.supplier_id"
            ></el-option>
          </el-select> -->
          <el-input
            v-model="form.factory_name"
            placeholder="请输入供应商"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div class="star">供应商品名：</div>
          <el-input
            v-model="form.product_name"
            placeholder="请输入供应商品名"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div>条形码：</div>
          <el-input
            v-model="form.bar_code"
            placeholder="请输入条形码"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div>供应商品名编号：</div>
          <el-input
            v-model="form.product_code"
            placeholder="请输入条形码"
            size="normal"
            clearable
          ></el-input>
        </div>
      </div>
    </div>
    <div class="NotForSaleEdit-two borderbottom">
      <div class="NotForSaleEdit-title">
        <div></div>
        <div>面料照片</div>
      </div>
      <div class="" style="maxwidth: 360px">
        <el-upload
          ref="uploadml"
          class="upload-demo"
          drag
          action="https://ssy.13yu.com/index.php/Admin/Api/upload"
          multiple
          :file-list="mlFileList"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <!-- <div class="el-upload__tip" slot="tip">只能上传pdf文件</div> -->
        </el-upload>
      </div>
    </div>
    <div class="NotForSaleEdit-two borderbottom">
      <div class="NotForSaleEdit-title">
        <div></div>
        <div>色卡照片</div>
      </div>
      <div class="" style="maxwidth: 360px">
        <el-upload
          ref="uploadsk"
          class="upload-demo"
          drag
          action="https://ssy.13yu.com/index.php/Admin/Api/upload"
          multiple
          :file-list="skFileList"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <!-- <div class="el-upload__tip" slot="tip">只能上传pdf文件</div> -->
        </el-upload>
      </div>
    </div>
    <div class="NotForSaleEdit-two borderbottom">
      <div class="NotForSaleEdit-title">
        <div></div>
        <div>挂钩标签</div>
      </div>
      <div class="" style="maxwidth: 360px">
        <el-upload
          ref="uploadgg"
          class="upload-demo"
          drag
          action="https://ssy.13yu.com/index.php/Admin/Api/upload"
          multiple
          :file-list="ggFileList"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <!-- <div class="el-upload__tip" slot="tip">只能上传pdf文件</div> -->
        </el-upload>
      </div>
    </div>
    <div class="NotForSaleEdit-two borderbottom">
      <div class="NotForSaleEdit-title">
        <div></div>
        <div>工艺单照片</div>
      </div>
      <div class="" style="maxwidth: 360px">
        <el-upload
          ref="uploadgy"
          class="upload-demo"
          drag
          action="https://ssy.13yu.com/index.php/Admin/Api/upload"
          multiple
          :file-list="gyFileList"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <!-- <div class="el-upload__tip" slot="tip">只能上传pdf文件</div> -->
        </el-upload>
      </div>
    </div>

    <div class="NotForSaleEdit-one borderbottom">
      <div class="NotForSaleEdit-title">
        <div></div>
        <div>其他信息</div>
      </div>
      <div class="NotForSaleEdit-one-content">
        <div>
          <div class="">使用部位：</div>
          <el-input
            v-model="form.application_site"
            placeholder="请输入使用部位"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div class="">成份：</div>
          <el-input
            v-model="form.ingredients"
            placeholder="请输入成份"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div class="">基本组织：</div>
          <el-input
            v-model="form.basic_organization"
            placeholder="请输入基本组织"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div>出米数：</div>
          <el-input
            v-model="form.meter_output"
            placeholder="请输入出米数"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div class="">染后布重：</div>
          <el-input
            v-model="form.fabric_weight_after_dyeing"
            placeholder="请输入染后布重"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div class="">染后全幅：</div>
          <el-input
            v-model="form.full_width_after_dyeing"
            placeholder="请输入基染后全幅"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div class="">染后有效门幅：</div>
          <el-input
            v-model="form.effective_door_width_after_dyeing"
            placeholder="请输入染后有效门幅"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div class="">染后密度：</div>
          <el-input
            v-model="form.density_after_dyeing"
            placeholder="请输入染后密度"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div class="">大货价格：</div>
          <el-input
            v-model="form.big_price"
            placeholder="请输入大货价格"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div class="">大货报价时间：</div>
          <el-date-picker
            v-model="form.big_price_time"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择月"
          >
          </el-date-picker>
        </div>
        <div>
          <div class="">工艺风险：</div>
          <el-input
            v-model="form.process_risk"
            placeholder="请输入工艺风险"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div class="">面料库呈现形式：</div>
          <el-input
            v-model="form.fabric_library_presentation"
            placeholder="请输入面料库呈现形式"
            size="normal"
            clearable
          ></el-input>
        </div>
        <!-- <div>
          <div class="">供应商备货情况：</div>
          <el-input
            v-model="form.supplier_stock_up"
            placeholder="请输入供应商备货情况"
            size="normal"
            clearable
          ></el-input>
        </div> -->
        <div>
          <div class="">印染工艺：</div>
          <el-input
            v-model="form.printing_and_dyeing_process"
            placeholder="请输入印染工艺"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div class="">后工艺适用性：</div>
          <el-input
            v-model="form.post_process_practicability"
            placeholder="请输入后工艺适用性"
            size="normal"
            clearable
          ></el-input>
        </div>
        <!-- <div>
          <div class="">坯布密度：</div>
          <el-input
            v-model="form.embryo_cloth_density"
            placeholder="请输入坯布密度"
            size="normal"
            clearable
          ></el-input>
        </div> -->
        <div>
          <div class="">经纱规格：</div>
          <el-input
            v-model="form.light_yarn_specification"
            placeholder="请输入经纱规格"
            size="normal"
            clearable
          ></el-input>
        </div>
        <!-- <div>
          <div class="">坯布经纱用纱量：</div>
          <el-input
            v-model="form.yarn_quantity_of_embryo_cloth_yarn"
            placeholder="请输入坯布经纱用纱量"
            size="normal"
            clearable
          ></el-input>
        </div> -->
        <div>
          <div class="">纬纱规格：</div>
          <el-input
            v-model="form.weft_specification"
            placeholder="请输入纬纱规格"
            size="normal"
            clearable
          ></el-input>
        </div>
        <!-- <div>
          <div class="">坯布纬纱用纱量：</div>
          <el-input
            v-model="form.weft_yarn_quantity_of_embryo_cloth"
            placeholder="请输入坯布纬纱用纱量"
            size="normal"
            clearable
          ></el-input>
        </div> -->
        <!-- <div>
          <div class="">坯布织造机型：</div>
          <el-input
            v-model="form.embryo_fabric_weaving_machine"
            placeholder="请输入坯布织造机型"
            size="normal"
            clearable
          ></el-input>
        </div> -->
        <!-- <div>
          <div class="">坯布核成本：</div>
          <el-input
            v-model="form.embryo_core_cost"
            placeholder="请输入坯布核成本"
            size="normal"
            clearable
          ></el-input>
        </div> -->
        <!-- <div>
          <div class="">染缸：</div>
          <el-input
            v-model="form.dye_vat"
            placeholder="请输入染缸"
            size="normal"
            clearable
          ></el-input>
        </div> -->
        <!-- <div>
          <div class="">色布核成本：</div>
          <el-input
            v-model="form.color_cloth_core_cost"
            placeholder="请输入色布核成本"
            size="normal"
            clearable
          ></el-input>
        </div> -->
        <!-- <div>
          <div class="">成本核价时间：</div>
          <el-date-picker v-model="form.cost_pricing_time" type="month" value-format="yyyy-MM" placeholder="选择月">
          </el-date-picker>
        </div> -->
        <div>
          <div class="">实际大货面料评估：</div>
          <el-input
            v-model="form.actual_bulk_fabric_evaluation"
            placeholder="请输入实际大货面料评估"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div class="">供应商联系方式：</div>
          <el-input
            v-model="form.supplier_contact_information"
            placeholder="请输入供应商联系方式"
            size="normal"
            clearable
          ></el-input>
        </div>
        <!-- <div>
          <div class="">曾经使用部位：</div>
          <el-input
            v-model="form.used_parts"
            placeholder="请输入曾经使用部位"
            size="normal"
            clearable
          ></el-input>
        </div> -->
        <div>
          <div class="">4楼摆放位置信息：</div>
          <el-input
            v-model="form.placement_position"
            placeholder="请输入摆放位置信息"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div class="">面料类型：</div>
          <el-select
            v-model="form.types"
            style="width: 400px"
            placeholder="请选择"
            filterable
          >
            <el-option
              v-for="item in mlList"
              :key="item.id"
              :label="item.title"
              :value="item.title"
            >
            </el-option>
          </el-select>
          <el-button type="" size="default" @click="onEdit">新建面料</el-button>
        </div>
      </div>
    </div>
    <div>
      <el-button
        type="primary"
        size="default"
        @click="onSave"
        :disabled="!form.factory_name || !form.product_name"
        >保 存</el-button
      >
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisibleML"
      width="30%"
    >
      <div>
        <el-form ref="formdata" :model="formdata" class="myform">
          <el-form-item label="面料类型" class="myform-item">
            <el-input
              v-model="formdata.title"
              placeholder="请输入面料类型名称"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleML = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit" :disabled="!formdata.title"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  postHomeCodeGetFactory,
  postAdminPricingSaveFabric,
  postAdminOperateSaveOrtherProduct,
  postAdminPricingLookFabric,
  postAdminProductionGettypeslist,
} from "@/api";
export default {
  data() {
    return {
      factoryList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      dialogVisibleML: false,
      disabled: false,
      mlFileList: [],
      skFileList: [],
      ggFileList: [],
      gyFileList: [],
      mlList: [],
      form: {
        factory_name: "",
        product_name: "",
        product_code: "",
        meter_output: "",
        bar_code: "",
        fabric_pic: [],
        color_pic: [],
        hook_label: [],
        application_site: "",
        ingredients: "",
        basic_organization: "",
        fabric_weight_after_dyeing: "",
        full_width_after_dyeing: "",
        effective_door_width_after_dyeing: "",
        density_after_dyeing: "",
        big_price: "",
        big_price_time: "",
        process_risk: "",
        fabric_library_presentation: "",
        supplier_stock_up: "",
        printing_and_dyeing_process: "",
        post_process_practicability: "",
        embryo_cloth_density: "",
        light_yarn_specification: "",
        yarn_quantity_of_embryo_cloth_yarn: "",
        weft_specification: "",
        weft_yarn_quantity_of_embryo_cloth: "",
        embryo_fabric_weaving_machine: "",
        embryo_core_cost: "",
        dye_vat: "",
        color_cloth_core_cost: "",
        cost_pricing_time: "",
        process_sheet_photo: [],
        actual_bulk_fabric_evaluation: "",
        supplier_contact_information: "",
        used_parts: "",
        placement_position: "",
        types: "",
      },
      formdata: {
        fid: 0,
        title: "",
        types: 2,
      },
    };
  },
  async mounted() {
    postAdminPricingLookFabric;
    if (this.$route.query.id) {
      this.postAdminPricingLookFabric(this.$route.query.id);
    }
    this.postHomeCodeGetFactory();
    this.postAdminProductionGettypeslist();
  },
  methods: {
    onEdit() {
      this.formdata = {
        fid: 0,
        title: "",
        types: 2,
      };
      this.dialogVisibleML = true;
    },
    async onSubmit() {
      let { formdata, form } = this;
      await postApieditcategory(formdata);
      this.postAdminProductionGettypeslist();
      this.dialogVisibleML = false;
    },
    // 面料类型
    async postAdminProductionGettypeslist() {
      let obj = {
        page:1,
        size:1000000
      }
      let res = await postAdminProductionGettypeslist(obj);
      this.mlList = res.data;
    },
    async postAdminPricingLookFabric(id) {
      let obj = {
        id,
      };
      let res = await postAdminPricingLookFabric(obj);
      let data = res.data;
      if (data.fabric_pic && data.fabric_pic.length) {
        let arr = data.fabric_pic.map((e) => {
          return {
            name: e,
            url: e,
          };
        });
        this.mlFileList = arr;
      }
      if (data.color_pic && data.color_pic.length) {
        let arr = data.color_pic.map((e) => {
          return {
            name: e,
            url: e,
          };
        });
        this.skFileList = arr;
      }
      if (data.hook_label && data.hook_label.length) {
        let arr = data.hook_label.map((e) => {
          return {
            name: e,
            url: e,
          };
        });
        this.ggFileList = arr;
      }
      if (data.process_sheet_photo && data.process_sheet_photo.length) {
        let arr = data.process_sheet_photo.map((e) => {
          return {
            name: e,
            url: e,
          };
        });
        this.gyFileList = arr;
      }
      let formobj = {
        id: data.id,
        product_name: data.product_name,
        factory_name: data.factory_name,
        product_code: data.product_code,
        meter_output: data.meter_output,
        bar_code: data.bar_code,
        fabric_pic: [],
        color_pic: [],
        hook_label: [],
        application_site: data.application_site,
        ingredients: data.ingredients,
        basic_organization: data.basic_organization,
        fabric_weight_after_dyeing: data.fabric_weight_after_dyeing,
        full_width_after_dyeing: data.full_width_after_dyeing,
        effective_door_width_after_dyeing:
          data.effective_door_width_after_dyeing,
        density_after_dyeing: data.density_after_dyeing,
        big_price: data.big_price,
        big_price_time: data.big_price_time,
        process_risk: data.process_risk,
        fabric_library_presentation: data.fabric_library_presentation,
        supplier_stock_up: data.supplier_stock_up,
        printing_and_dyeing_process: data.printing_and_dyeing_process,
        post_process_practicability: data.post_process_practicability,
        embryo_cloth_density: data.embryo_cloth_density,
        light_yarn_specification: data.light_yarn_specification,
        yarn_quantity_of_embryo_cloth_yarn:
          data.yarn_quantity_of_embryo_cloth_yarn,
        weft_specification: data.weft_specification,
        weft_yarn_quantity_of_embryo_cloth:
          data.weft_yarn_quantity_of_embryo_cloth,
        embryo_fabric_weaving_machine: data.embryo_fabric_weaving_machine,
        embryo_core_cost: data.embryo_core_cost,
        dye_vat: data.dye_vat,
        color_cloth_core_cost: data.color_cloth_core_cost,
        cost_pricing_time: data.cost_pricing_time,
        process_sheet_photo: [],
        actual_bulk_fabric_evaluation: data.actual_bulk_fabric_evaluation,
        supplier_contact_information: data.supplier_contact_information,
        used_parts: data.used_parts,
        placement_position: data.placement_position,
        types: data.types,
      };

      this.form = formobj;
    },
    onInput(e) {
      let { long, wide, high } = this.form;
      if (long && wide && high) {
        this.form.volume = long * wide * high;
      } else {
        this.form.volume = "";
      }
    },
    async onSave() {
      console.log("mlFileList", this.$refs.uploadml.uploadFiles);

      let { form } = this;
      let formobj = JSON.parse(JSON.stringify(form));
      if (form.factory_name && form.product_name) {
        let uploadml = this.$refs.uploadml.uploadFiles; // 面料照片
        let uploadsk = this.$refs.uploadsk.uploadFiles; //色卡照片
        let uploadgg = this.$refs.uploadgg.uploadFiles; //挂钩标签
        let uploadgy = this.$refs.uploadgy.uploadFiles; // 工艺单照片
        if (uploadml.length) {
          let arr = uploadml.map((e) => {
            if (e.response && e.response.code == 0) {
              return e.response.img;
            } else if (e.url) {
              return e.url;
            } else {
            }
          });
          formobj.fabric_pic = arr;
        }
        if (uploadsk.length) {
          let arr = uploadsk.map((e) => {
            if (e.response && e.response.code == 0) {
              return e.response.img;
            } else if (e.url) {
              return e.url;
            } else {
            }
          });
          formobj.color_pic = arr;
        }
        if (uploadgg.length) {
          let arr = uploadgg.map((e) => {
            if (e.response && e.response.code == 0) {
              return e.response.img;
            } else if (e.url) {
              return e.url;
            } else {
            }
          });
          formobj.hook_label = arr;
        }
        if (uploadgy.length) {
          let arr = uploadgy.map((e) => {
            if (e.response && e.response.code == 0) {
              return e.response.img;
            } else if (e.url) {
              return e.url;
            } else {
            }
          });
          formobj.process_sheet_photo = arr;
        }
        try {
          await postAdminPricingSaveFabric(formobj);
          this.$message.success("保存成功");
          this.$router.go(-1);
        } catch (error) {}
      }
    },
    handleRemove(file) {
      let { filelist } = this;
      const index = filelist.findIndex((e) => e.url === file.url);
      filelist.splice(index, 1);
      this.filelist = filelist;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 加工厂列表
    postHomeCodeGetFactory() {
      let obj = {
        type: 8,
        page: 1,
        size: 1000,
      };
      postHomeCodeGetFactory(obj).then((res) => {
        this.factoryList = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.borderbottom {
  border-bottom: 1px solid #efefef;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.NotForSaleEdit {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  .NotForSaleEdit-title {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 800;
    padding-bottom: 20px;
    > div:nth-child(1) {
      width: 4px;
      height: 26px;
      border-radius: 4px;
      background: #409eff;
      margin-right: 10px;
    }
  }
  .NotForSaleEdit-one {
    .NotForSaleEdit-one-content {
      display: flex;
      flex-wrap: wrap;
      > div {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        > div:nth-child(1) {
          width: 140px;
          text-align: right;
          margin-right: 10px;
        }
        > .el-input {
          width: 400px;
        }
      }
    }
  }
  .NotForSaleEdit-two {
    .NotForSaleEdit-two-content {
      display: flex;
      flex-wrap: wrap;
      > div {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        > div:nth-child(1) {
          width: 140px;
          text-align: right;
          margin-right: 10px;
        }
        /deep/ .el-input {
          width: 400px;
        }
      }
    }
  }
}
</style>